<template>
<div>
  <el-card v-for="(item,id) in comment" :key="id">
    <el-popover placement="bottom-start" width="100" trigger="hover">
<div class="userinfo" style="margin: 0">
  <h3 v-if="item.gender">性别：{{item.gender==1?'男':'女'}}</h3>
  <h3 v-if="item.userLevel">用户等级：{{item.userLevel}}</h3>
  <h3 v-if="item.cityName">所在城市：{{item.cityName}}</h3>
</div>
    <el-avatar :size="50" :src="item.avatarUrl" slot="reference"></el-avatar></el-popover>
    <div class="userinfo">
      <h3>{{item.nickName}}</h3>
      <el-rate v-model="item.score" disabled></el-rate><span>{{item.time}}</span>
      <hr>
      <p>{{ item.content }}</p>
      <div class="spacebetween">
        <el-tag size="medium">{{item.reply}}回复</el-tag>
        <el-button @click="approve(item)"><i class="iconfont icon-dianzan"></i>{{item.approve}}</el-button>
      </div>
    </div>

  </el-card>
</div>
</template>

<script>
export default {
  name: "Comcard",
 props:{comment:{required:true}},
  methods:{
    approve(item){
      this.$store.dispatch('movie/movAddComment',item)
// this.$store.dispatch('movie/OldCom',item)
      item.approve=item.approve+1
    }
  }
}
</script>

<style scoped>
.el-card{
  margin-top: 20px;
}
.el-avatar{
  position: absolute;
}
hr{
  width: 100%;
  color: #cccccc;
}
.userinfo{
  width: 90%;
  display: inline-block;
  margin: 0 70px;
}
.userinfo span{
  margin-left: 10px;
  color: #cccccc;
}
.el-tag {
  margin-top: 10px;
  font-size: 10px;
}
.userinfo .el-rate{
  display: inline-block;
}
.el-button:focus, .el-button:hover {
  color: black;
  border-color: #c6e2ff;
  background-color: #4d97e3;}
</style>
